---
import cfg from "blog.config";
import type { BasicBackgroundConfig } from "@/declare/defineBlogConfig";

export interface Props {
  cfg: Partial<BasicBackgroundConfig>;
}

const { filter, mask, type, content } = Astro.props.cfg,
  {
    WebsiteSettings: { base },
  } = cfg;

let bg = "";

switch (type) {
  case "fade":
    bg = `background-image: ${content};`;
    break;
  case "photo":
    bg = `background-image: url(${base! + content});`;
    break;

  default:
    bg = `background-color: ${content};`;
    break;
}
---

<div
  id="Background"
  class={`${mask ? " mask" : ""} ${filter ? " filter" : ""}`}
  style={bg}
>
</div>

<style lang="scss">
  #Background {
    z-index: -1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-position: center;
    // background-image: url(/src/assets/1.jpg);
    background-size: cover;

    &::before {
      content: " ";
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.3);
    }

    &.mask {
      &::before {
        opacity: 1;
      }
    }

    &.filter {
      filter: blur(3px);
    }
  }
</style>

<style is:global>
  html.dark #Background::before {
    opacity: 1;
  }
</style>
